import React, { Component } from 'react';
import {HashRouter as Router,Route,Link} from "react-router-dom"
// Route  中三种渲染模式的区别 
// https://reactrouter.com/web/api/Route/component

class Home extends Component{
  render(){
    console.log("Home 组件渲染了,",this.props);// component 模式自动注入路由属性 history location match
    return <h1>Home 组件</h1>
  }
}
class Product extends Component{
  render(){
    console.log("product 组件渲染了",this.props);
    return <h1>产品</h1>
  }
}
class Info extends Component{
  render(){
    return <h1>Info 组件</h1>
  }
}
class App extends Component {
  render() {
    return (
      <Router>
        <Link to="/home">主页</Link>
        <Link to="/product">产品</Link>
        <Link to="/info">信息</Link>
        {/* 第一个渲染模式 component*/}
        <Route path="/home" component={Home}></Route>
        {/*第二种 渲染模式 render 模式*/}
        <Route path="/product" render={(props)=><Product {...props}></Product>}></Route>
        {/*第三种模式 children 模式，无论匹配与否，它都会渲染组件*/}
        <Route path="/info" children={(props)=><Info {...props}></Info>}></Route>
      </Router>
    );
  }
}

export default App;
